<template>
  <div class="ranking">
    <div class="rank_left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item"
          v-for="(item, index) in rankingKeyWord"
          :key="index"
          @click="activeKey = index"
        />
      </van-sidebar>
    </div>
    <div class="rank_right">
      <router-link
        :to="'/bookdetails?id=' + item.id"
        tag="div"
        class="books_item"
        v-for="item in bookData"
        :key="item.id"
        v-show="activeKey == item.type - 1"
      >
        <div class="img">
          <img v-lazy="item.cover" alt="" />
        </div>
        <div class="content">
          <div class="name">{{ item.title }}</div>
          <div class="writer">{{ item.author }}</div>
          <div class="type">{{ item.bookType }}</div>
          <div class="introduce">
            {{ item.d }}
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      activeKey: 0, //控制第几个tabs显示
      bookData: [], //存储获取的书籍
      rankingKeyWord: [
        "最热榜",
        "完结榜",
        "收藏榜",
        "推荐榜",
        "新书榜",
        "高分榜",
      ],
    };
  },
  methods: {
    getRankingData() {
      axios.get("data/bookmall/rankingLists.json").then((res) => {
        this.bookData = res.data;
      });
    },
  },
  created() {
    // 获取数据
    this.getRankingData();
  },
};
</script>

<style lang="less">
.bookmall {
  // 榜单
  .ranking {
    display: flex;
    border-top: 1px solid #e4e4e4;
    .rank_left {
      position: fixed;
      top: 76px;
      height: calc(100vh - 126px);
      border-right: 1px solid #e4e4e4;
      .van-sidebar-item {
        background-color: #fff;
      }
      .van-sidebar-item--select,
      .van-sidebar-item--select:active {
        color: #52b594;
        background-color: #f6f7fa;
        &::before {
          background-color: #52b594;
        }
      }
    }
    .rank_right {
      width: calc(100% - 80px);
      height: calc(100vh - 127px);
      margin-left: 80px;
      overflow: auto;
      .books_item {
        height: 100px;
        margin: 14px 10px;
        display: flex;
        .img {
          flex: 0 0 74px;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .content {
          .name {
            font-size: 14px;
            font-weight: 550;
            transform: scale(0.83333);
          }
          .writer,
          .type,
          .introduce {
            transform: scale(0.83333);
            font-size: 12px;
            color: #818181;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .introduce {
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3; /* 设置行数 */
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
}
</style>